<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <title>Document</title>
    <style>
        .remind{
            height: 26px;
            font:12px/26px 'simhei';
            background:#dbf2fb;
            border-radius: 5px;
            margin:78px auto 40px;
            text-align: center;
            color:#becbd0;
            width:446px;
        }
        .romselect{
            width:446px;
            height: 38px;
            margin:0px auto 0px;
            color:#999999;
            margin-bottom: 20px;
        }
        .romselect .Aform{
            width:359px;
            height: 36px;
            outline: none;
            border-radius: 7px;
            color:#999999;
        }
        span{
            color:#333333;
        }
        /**/
        .demoHidden{
			display: none;
		}
		.radioInput{
			display: inline-block;
			width:16px;
			height:16px;
			border:1px solid #000000;
			border-radius:100%;
			margin-right:5px;
			vertical-align: middle;
		}
		.demoHidden:checked + .radioInput:after{
			content:"";
			display: inline-block;
			width:17px;
			height:17px;
			background:#000000;
			border-radius:100%;
		}
		.demoHidden:checked + .radioInput{
			border:1px solid #000000;
        }
        /**/
        .patientName input{
            border:1px solid #999999;
        }
        .patientTime select{
            width:152px;
            height:36px;
            border-radius: 7px;
            color:#999999;
            outline: none;
        }
        .patientState{
            
            height: 120px;
        }
        .patientState p{
            font-size: 11px;
            text-align: right;
        }
        .patientState textarea{
            border-radius: 7px;
            vertical-align: top;
        }
        .Submit{
            width:360px;
            background:#57c7f6;
            height: 38px;
            margin-top: 40px;
            margin-left:25%;
            border:none;
            border-radius: 7px;
            font-size: 17px;
            color:#ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body> 
    <form action="javascript:void(0)" method="GET" >
        <div class="remind">温馨提醒：费用由医院自行设定,平台不收取任何额外费用</div>
        <div class="romselect">就诊科室：<select name="" value="" class="Aform" id="room">
                        <option>眼科</option>
                        <option>内科</option>
                        <option>外科</option>
                    </select>
        </div>
        <div class="romselect patientName">患者姓名：<input type="text" placeholder="请输入" class="Aform"  id="patientName"></div>
        <div class="romselect " id="patientSex">患者性别：<label><input type="radio" value="男" name="sex" class="demoHidden" id="sex1"><strong class="radioInput"></strong><span>男</span></label> <label><input type="radio" value="女" name="sex" class="demoHidden" id="sex2"><strong class="radioInput"></strong><span>女</span></label></div>
        <div class="romselect " id="patientType">诊断类型：<label><input type="radio" value="检查/诊断" name="type" class="demoHidden" id="type1"><strong class="radioInput"></strong><span>检查/诊断</span></label><label><input type="radio" name="type" class="demoHidden" id="type2" value="治疗/诊断"><strong class="radioInput"></strong><span>治疗/诊断</span></label><label><input type="radio" name="type" class="demoHidden" id="type3" value="复诊"><strong class="radioInput"></strong><span>复诊</span></label></div>
        <div class="romselect patientTime">预约时间：<select name="" id="patientTimeM">
                      </select><span>月</span>
                      <select name="" id="patientTimeD">
                      </select><span>日</span>
        </div>
        <div class="romselect patientState">患者病情：<textarea name="" cols="49" rows="6" placeholder="请输入" id="patientState"></textarea><p>温馨提示：您的个人信息及联系方式我们将保密,仅医患双方可见</p></div>
        <a href="###" id="asub"><input type="submit" name="" id="Submit" value="预约挂号" class="Submit"></a>
    </form>
</body>
<script src="js/receptionjson.js"></script>
<script>
    var oMonth=document.getElementById("patientTimeM");
    var oDay=document.getElementById("patientTimeD");
    var oName=document.getElementById("patientName");
    var oSex=document.getElementsByClassName("demoHidden");
    var opatientState=document.getElementById("patientState");
    var osubmit=document.getElementById("Submit");
    var asub=document.getElementById("asub");
    var osex1=document.getElementById("sex1");
    var osex2=document.getElementById("sex2");
    var otype1=document.getElementById("type1");
    var otype2=document.getElementById("type2");
    var otype3=document.getElementById("type3");
    var opatientSex=document.getElementById("patientSex");
    var opatientType=document.getElementById("patientType");
    var osexinpt=opatientSex.getElementsByTagName("input");
    var otypeinpt=opatientType.getElementsByTagName("input");
    var oroom=document.getElementById("room");
    for (var i in oDate) {
        var oMSelect = document.createElement("option");
        oMSelect.innerHTML = i;
        oMonth.appendChild(oMSelect);
    }
    var index = oMonth.selectedIndex;
    var oProTxt = oMonth.options[index].text;
    for (var i = 0; i < oDate[oProTxt].length; i++) {
        var oDSelect = document.createElement("option");
        oDSelect.innerHTML = oDate[oProTxt][i];
        oDay.appendChild(oDSelect);
    }
    oMonth.onchange = function () {
        oDay.innerHTML = "";
        index = oMonth.selectedIndex;
        oProTxt = oMonth.options[index].text;
        for (var i = 0; i < oDate[oProTxt].length; i++) {
            var oDSelect = document.createElement("option");
            oDSelect.innerHTML = oDate[oProTxt][i];
            oDay.appendChild(oDSelect);
        }
    }
    osubmit.onclick=function(){
        var index = oroom.selectedIndex;
        var appointmentRoom=oroom.options[index].text;
        var monthindex = oMonth.selectedIndex;
        var appointmentmonth=oMonth.options[monthindex].text;
        var dayindex = oDay.selectedIndex;
        var appointmentday=oDay.options[dayindex].text;
        if(oName.value==''){
        alert('请输入姓名')
        }else if(osex1.checked==false&&osex2.checked==false){
            alert('请选择男女');
        }else if(otype1.checked==false&&otype2.checked==false&&otype3.checked==false){
            alert('请选择选择类型');
        }else if(opatientState.value==''){
            alert('请输入病情');
        }else{
            localStorage.setItem("appointmentRoom",appointmentRoom)
            localStorage.setItem("appointmentName", oName.value);
            var sex='';
            var type='';
            for(var i=0;i<osexinpt.length;i++){
                if(osexinpt[i].checked){
                    sex=osexinpt[i].value;
                }
            }
            for(var i=0;i<otypeinpt.length;i++){
                if(otypeinpt[i].checked){
                    type=otypeinpt[i].value;
                }
            }
            localStorage.setItem("appointmentSex", sex);
            localStorage.setItem("appointmentType", type);
            localStorage.setItem("appointmentMonth",appointmentmonth);
            localStorage.setItem("appointmentDay",appointmentday);
            localStorage.setItem("appointmentState", opatientState.value);
            console.log(localStorage.getItem('appointmentRoom'));
            console.log(localStorage.getItem('appointmentName'));
            console.log(localStorage.getItem('appointmentSex'));
            console.log(localStorage.getItem('c'));
            console.log(localStorage.getItem('appointmentMonth'));
            console.log(localStorage.getItem('appointmentDay'));
            console.log(localStorage.getItem('appointmentState'));
            window.location.href='appointmentBill.html'
        }
    }
    
</script>
</html>